<template>
  <div class="login">
    <img class="logo" alt="Vue logo" src="../assets/logo.png">
    <p class="app-name">车辆注册平台</p>

    <div class="login-from">
        <van-loading v-if="showLoading" color="white" />
        <van-cell-group>
        <van-field
            v-model="username"
            left-icon="user-circle-o"
            label="用户名"
            right-icon="question-o"
            placeholder="请输入用户名"
            @change="unInput(username)"
            clearable
        />
        <!-- @click-right-icon="$toast('question')" -->
        <van-field
            v-model="password"
            left-icon="other-pay"
            type="password"
            label="密码"
            placeholder="请输入密码"
            @change="unInput(password)"
        />
        </van-cell-group>
    </div>

    <!-- <router-link to="/orderPage1"> -->
    <van-button size="large" type="primary" @click.native="login">登录</van-button>
    <!-- </router-link> -->

  </div>
</template>

<script>
import  { Loading, Field }  from 'vant';
import { login } from '@/api/login.js'

export default {
  name: 'login',
  props: {
    headerShow: Boolean
  },
  components: {
    Field
  },
  data() {
    return {
        showToast: false,
        toastText: '',
        showLoading: false,
        loadingText: 'loading',
        username: '',
        password: '',
        // loginForm: {
        //     username: '',
        //     password: ''
        // }
    }
  },
  methods:{
    unInput(value) {
        console.log("value",value)
    },
    login(){
        console.log("login Func")
        login(this.username, this.password).then(response => {
        this.showLoading = false
        this.$store.dispatch('update_auth_token', response.data)
        this.$router.push({ path: '/' })
      }).catch((e) => {
        this.showLoading = false
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
    /* background-color:#f1f1f1; */
    height: 100vh;
    padding: 0 20px;
}
.logo {
    width: 30%;
    padding: 10px;
    border-radius: 100%;
    margin-top:60px;
    background-color:#f0f0f0;
}
.app-name {
    font-size: 24px;
    font-weight: bold;
}
.login-from {
    margin: 30px 0;
}
</style>
